<template>
	<view class="container">
		<view class="title">
			<text :class="type == 'zf' ? 'active' : ''" @click="readWave('zf')">{{$t('inspection.taskExecute.amplitude')}}</text>
			<text :class="type == 'jsd' ? 'active' : ''" @click="readWave('jsd')">{{$t('inspection.taskExecute.acceleration')}}</text>
			<text :class="type == 'sudu' ? 'active' : ''" @click="readWave('sudu')">{{$t('inspection.taskExecute.speed')}}</text>
		</view>
		<view id="echart" class="charts" :prop="option" :change:prop="echarts.updateEcharts"></view>
		<view class="btn">
			<button type="primary" size="mini" @click="closePop">{{$t('baseCommon.buttons.close')}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 此处是有意写错，如果写mpType，会报错，原因未知
			mpTypee: {
				type: String,
				default: 'zf'
			},
			waveData: {
				type: Array,
				default() {
					return []
				}
			}
		},
		data() {
			return {
				type: '',
				newType: '',
				timer: null,
				option: {
					grid: {
						left: '15%',
						top:'8%',
						right:'1%',
						bottom:'5%'
					},
					xAxis: {
						axisLabel:{
							show: false,
							interval: 30,
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: []
					},
					yAxis: {
						type: 'value',
						axisTick: {
							show: false
						},
					},
					series: [{
						data: [],
						type: 'line',
						smooth: true,
						itemStyle : {
							normal : {
								color:'#1e90e6',
								lineStyle:{
									color:'#1e90e6'
								},
							}
						}
					}]
				}
			}
		},
		watch: {
			waveData(n, o) {
				if(this.waveData.length > 0) {
					uni.hideLoading()
				}
				
				this.waveData = n
				
				if(this.type != this.newType) {
					this.option.xAxis.data = []
					this.option.series[0].data = []
					this.type = this.newType
				} else {
					this.option.xAxis.data = this.option.xAxis.data.slice(150)
					this.option.series[0].data = this.option.series[0].data.slice(150)
				}
				for(let i=0; i<this.waveData.length; i++) {
					this.option.xAxis.data.push(i)
					this.option.series[0].data.push(this.waveData[i])
				}
			}
		},
		mounted() {
			this.type = this.mpTypee
			this.readWave(this.type)
		},
		methods: {
			readWave(type) {
				if(this.newType != type) {
					uni.showLoading({
					    title: this.$t('inspection.message.reading')
					});
				}
				this.newType = type
				
				// 清除定时器
				clearInterval(this.timer)
				this.timer = null
				
				// 获取数据
				this.$emit('readWave', type)
				
				// 定时执行
				this.timer = setInterval(() => {
					this.readWave(type)
				}, 2500)
			},
			closePop() {
				this.$emit('saveWave', this.newType)
				clearInterval(this.timer)
				this.timer = null
				this.$emit('closePop', 'wave')
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		data() {
			return {
				script: "",
			}
		},
		mounted() {
			if (typeof window.echarts === 'object') {
				this.drawChart()
			} else {
				this.script = document.createElement('script')
				this.script.src = './static/libs/echarts.min.js'
				this.script.onload = this.drawChart
				document.head.appendChild(this.script)
			}
		},
		methods: {
			drawChart() {
				myChart = echarts.init(document.getElementById('echart'));
				myChart.setOption(this.option)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				myChart.setOption(newValue)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #FFFFFF;
	}
	
	.title {
		font-size: 16px;
		padding: 10px;
		
		uni-text {
		    margin: 5px;
		}
		
		.active {
			color: #1E91E6;
		}
	}
	
	.btn {
		text-align: center;
		padding-bottom: 10px;
		
		uni-button {
			font-size: 14px;
		}
	}
	
	.charts {
		width: 350px;
		height: 300px;
		background-color: #FFFFFF;
	}
</style>
